<template>
  <div>
    <h2>周数据</h2>
    <div id="weekEcharts"> </div>
</div>
</template>
<script setup lang = "ts">
import * as echarts from 'echarts';
import { ref, onMounted,reactive } from 'vue';
import { weekDataApi } from '@/services/database';
const chart = ref<echarts.ECharts | null>(null);
onMounted(async() => {
  
    const chartContainer = document.getElementById('weekEcharts');
    //后台请求数据
    const weeksdata = reactive({})
      
        const ret = await weekDataApi()
        // const days = data.map(item => item.day);
        const day1 = ret.data.data1.map((item:any)=>item.day)
        const day1data = ret.data.data1.map((item:any)=>item.value)
        const day2data = ret.data.data2.map((item:any)=>item.value)
        console.log(day1);
  
  if (chartContainer) {
    chart.value = echarts.init(chartContainer);

    const options = {
      xAxis: {
        data: day1
      },
      yAxis: {},
      series: [
        {
          data: day1data,
          type: 'line',
          stack: 'x'
        },
        {
          data: day2data,
          type: 'line',
          stack: 'x'
        }
      ]
    };

    if (chart.value) {
      chart.value.setOption(options);
    }
  }
});

</script>
<style lang= "scss" scoped>
#weekEcharts {
  width: 100%;
  height: 400px;
}
</style>